<template>
  <div class="sign-up">
    <div class="login-group login-name" :class="classObject('signUp_phone')" v-if="step === 0">
      <i></i>
      <input v-validate="'required|mobile'" data-vv-as="手机号码" name="signUp_phone" type="text" placeholder="请输入手机号码"
             v-model="name">
      <span v-show="errors.has('signUp_phone')">{{ errors.first('signUp_phone') }}</span>
    </div>
    <template v-else>
      <div class="login-group login-name" style="border-bottom: none;">
        <i></i>
        <p>{{name}}</p>
      </div>
      <div class="login-group login-pwd" :class="classObject('signUp_pwd')">
        <i></i>
        <input v-validate="'required|min:6'" data-vv-as="密码" name="signUp_pwd" type="password"
               v-show="!showPwd"
               placeholder="请输入密码" v-model="pwd">
        <input type="text" placeholder="请输入密码" v-show="showPwd" v-model="pwd">
        <span v-show="errors.has('signUp_pwd')">{{ errors.first('signUp_pwd') }}</span>
        <div class="pwd-eyes" :class="{on: showPwd}" @click="showPwd = !showPwd"></div>
      </div>
      <div class="login-code">
        <div class="login-group" :class="classObject('signUp_code')">
          <i></i>
          <input v-validate="'required'" data-vv-as="验证码" type="text" name="signUp_code" placeholder="请输入验证码"
                 v-model="code">
          <span v-show="errors.has('signUp_code')">{{ errors.first('signUp_code') }}</span>
        </div>
        <button :disabled="time > 0" @click="getCode" class="code-btn">{{text}}</button>
      </div>
    </template>
    <button type="button" :disabled="loading" class="login-btn btn-blue" @click="nextStep()">
      <i></i>
      {{step === 0 ? '下一步' : isReset ? '确认重置密码' : '注册并登录'}}
    </button>
    <p v-show="step === 1 && !isReset" class="pack" @click.stop="pack = !pack"><i :class="{on: pack}"></i>已阅读并同意 <a
      href="#">《熙隆领航客户协议》</a></p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        step: 0,
        name: '',
        pwd: '',
        showPwd: false,
        loading: false,
        time: 0,
        code: '',
        pack: true
      }
    },
    methods: {
      classObject (name) {
        return {
          'is-success': this.fields[name] ? this.fields[name].valid : false,
          'is-danger': this.errors.has(name)
        }
      },
      nextStep () {
        this.$validator.validateAll()
          .then(flag => {
            if (!flag) return
            this.loading = true
            let step = this.step
            if (step === 0) {
              this.getCode(true).catch(err => {
                this.asyncError('signUp_phone', err)
                this.loading = false
              })
            } else {
              if (!this.pack) {
                this.$message.error('请同意用户协议后注册!')
                return
              }
              let isReset = this.isReset
              this.$http.post(isReset ? '/index/copy_api/getNewPassword' : '/index/copy_api/register', {
                username: this.name,
                password: this.pwd,
                token: this.code
              }).then(data => {
                let redirect = this.$route.query.redirect
                if (this.isReset) {
                  this.$router.push({path: '/login/sign-in?redirect=' + redirect})
                  return
                }
                if (redirect) {
                  window.location.href = redirect
                } else {
                  this.$router.push({name: 'live'})
                }
              }).catch(err => {
                // this.$message.error(err)
                this.loading = false
              })
            }
          })
      },
      getCode (isNextStep) {
        return this.$http.post('/index/copy_api/getsms', {
          username: this.name,
          type: this.isReset ? 'repeat' : 'register'
        }).then(data => {
          if (isNextStep) {
            this.loading = false
            this.step = 1
          }
          this.time = 120
          this.$nextTick(() => {
            this.timer()
          })
        })
      },
      asyncError (key, msg){
        console.log(this.fields)
        this.errors.errors.unshift({field: key, msg: msg, scope: "__global__"})
        this.fields[key].valid = false
      },
      timer: function () {
        if (this.time > 0) {
          this.time--
          setTimeout(this.timer, 1000)
        }
      }
    },
    computed: {
      text: function () {
        return this.time > 0 ? this.time + 's 后重新获取' : '获取验证码';
      },
      isReset: function () {
        return this.$route.name === 'reset-pwd'
      }
    }
  }
</script>
